<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="max-w-md w-full mx-auto p-4">
      <UCard class="p-6 shadow-lg">
        <template #header>
          <h1 class="text-2xl font-bold text-center">登录</h1>
          <p class="text-gray-600 text-center mt-2">登录到您的账户</p>
        </template>
        
        <form @submit.prevent="handleLogin" class="space-y-4">
          <div>
            <UFormGroup label="邮箱" required>
              <UInput 
                v-model="email" 
                type="email" 
                placeholder="请输入您的邮箱"
                :error="errors.email"
                required
              />
            </UFormGroup>
          </div>
          
          <div>
            <UFormGroup label="密码" required>
              <UInput 
                v-model="password" 
                type="password" 
                placeholder="请输入您的密码"
                :error="errors.password"
                required
              />
            </UFormGroup>
          </div>
          
          <UAlert 
            v-if="errorMessage" 
            color="red" 
            variant="soft" 
            :title="errorMessage"
            class="mb-4"
          />
          
          <UButton 
            type="submit" 
            color="primary" 
            block 
            :loading="loading"
            :disabled="loading"
          >
            {{ loading ? '登录中...' : '登录' }}
          </UButton>
        </form>
        
        <template #footer>
          <div class="text-center">
            <p class="text-sm text-gray-600">
              还没有账户？ 
              <NuxtLink to="/signup" class="text-primary-500 hover:text-primary-600">
                注册
              </NuxtLink>
            </p>
          </div>
        </template>
      </UCard>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const supabase = useSupabaseClient()
const user = useSupabaseUser()

const email = ref('')
const password = ref('')
const loading = ref(false)
const errorMessage = ref('')
const errors = ref({})

// 如果已登录则重定向
watch(user, (newUser) => {
  if (newUser) {
    navigateTo('/')
  }
}, { immediate: true })

/**
 * 处理用户登录
 * 验证用户输入并通过 Supabase 进行身份验证
 */
async function handleLogin() {
  loading.value = true
  errorMessage.value = ''
  errors.value = {}
  
  // 基本验证
  if (!email.value) {
    errors.value.email = '邮箱是必填项'
    loading.value = false
    return
  }
  
  if (!password.value) {
    errors.value.password = '密码是必填项'
    loading.value = false
    return
  }
  
  try {
    const { error } = await supabase.auth.signInWithPassword({
      email: email.value,
      password: password.value
    })
    
    if (error) {
      errorMessage.value = error.message
    } else {
      // 成功 - 重定向将通过监听器处理
      await navigateTo('/')
    }
  } catch (err) {
    errorMessage.value = '发生了意外错误'
    console.error(err)
  } finally {
    loading.value = false
  }
}

// 设置页面元数据
definePageMeta({
  layout: false
})
</script>